<template>
    <div class="bottom-nav">
        <div class="nav-item" :class="{ active: activeTab === 'home' }" @click="switchTab('home')">
            <i class="fa fa-home"></i>
            <span>首页</span>
        </div>
        <div class="nav-item" :class="{ active: activeTab === 'discover' }" @click="switchTab('discover')">
            <i class="fa fa-shopping-bag"></i>
            <span>商城</span>
        </div>
        <div class="nav-item publish" @click="switchTab('publish')">
            <i class="fa fa-plus"></i>
        </div>
        <div class="nav-item" :class="{ active: activeTab === 'notification' }" @click="switchTab('notification')">
            <i class="fa fa-comment"></i>
            <span>消息</span>
        </div>
        <div class="nav-item" :class="{ active: activeTab === 'mine' }" @click="switchTab('mine')">
            <i class="fa fa-user"></i>
            <span>我的</span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 当前激活的导航项
const activeTab = ref('home');

// 切换导航项
const switchTab = (tab) => {
    activeTab.value = tab;
    // 实际项目中可添加路由跳转逻辑
    // router.push(`/${tab}`);
};
</script>

<style scoped>
.bottom-nav {
    height: 60px; /* 与顶部导航高度一致 */
    background-color: #fff;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between; /* 改为space-between确保间距平均 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 0 20px; /* 增加左右内边距，避免边缘项贴边 */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    width: 20%; /* 平均分配宽度（5个项各占20%） */
    height: 100%;
    cursor: pointer;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
}

/* 激活状态样式 */
.nav-item.active {
    color: #FF6B35;
}

/* 圆形发布按钮样式 */
.nav-item.publish {
    width: 64px; /* 固定圆形按钮尺寸 */
    height: 64px;
    border-radius: 50%;
    background-color: #FF6B35;
    color: white;
    margin-top: -32px; /* 向上突出半个高度 */
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.6);
    flex-shrink: 0; /* 防止按钮被压缩 */
}

.nav-item.publish i {
    font-size: 28px;
    margin-bottom: 0;
}

/* 按钮点击反馈 */
.nav-item.publish:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.6);
}
</style>
